Hello and welcome to this lecture.
In this lecture we will be creating the functionality for the app using JavaScript and G query.
I have got my javascript text editor all file open so this is where I will be adding hardware javascript
and jaquie is going to be looked using variables counter and somjee query select is no key.
I have added Sonn code inside my javascript section of the projet file.
So like one here I have defined a variable chord collars.
Variables are used to store values that you can retrieve and use later.
So have created a variable with the word v r and have given it the name colours.
So that's how you equate a variable you type in the AH space and then the name of the variable is a
good idea to name the variables as closely as possible to reflect on what you want the variable to do.
So the variable is equal to a free variable stores one value but an array can't store several values
has one.
It can see you can identify an array where the square brackets saw lots of different values inside the
arrays but they are regarded as one variable which is equal to this column here.
If I wasn't using an array I would only be a live only be able to store one value.
So by using an array you can store more people values as one value but each of the values in the array
can be accessed by their index.
The first is known as 0 1 to 3 and so on.
So if I wanted to access this variable now with an index of 2 it will be this that I will get.
So it will be 0 1 2.
Sorry if I want to access the variable with an index of 2.
It will be this one to be green.
So this is the 0 1 2 so they have is zero based index.
So defining the variable which we will use later to change the colours on line 3.
Hi I have defined a counter.
Kind of like is equal to zero which is known as a counter.
Basically what this would do when the page loads the Cantar is set had zero.
Okay before you starts use the values of the variable.
I have added some more code from line six to nine lines six years used the dollar sign.
Any way you see the dollar sign you know that you are referencing the jig query library.
So line 6 here what that code is going to do is using the dollar sign and inside the dollar sign.
The parenthesis is taking an idea.
Attribute as the select all this change carlaw is derived from this change caller I.D. input.
That's what is talking about.
So the jig query select or picks up that attribute and at taxes dot click event because there's a button.
Let's go back and check here because it's a button so is attached a click event and that click event
is equal.
So this function here.
What's in between is college braces is what the function will do.
So what the code is saying is that when the button is clicked it will execute that function.
How why the function is.
Online 7 function will grab the div.
Okay if we go back to our hate mail we see we've got a div here so when the button does button is clicked
it'll pig deep it will target that deaves there.
Okay and attach is csx method to it an inside the inside that method or function it takes in the background
column so slim that it would change the background or use in C Ss and it will pick the values from these
variable called collars which we have defined here and it will start with the counter.
We've set the counter to zero so that means it will start from red so when we do the default value off
the box will be class.
What this is are is come like is sets the counter a starting point.
So it's taking the starting point would be read which is which is zero.
Which is I hear and I hear where the value of zero.
So it was tough the contact read and then as we click it will go to the columns and then back again.
Okay that's all that does online it says.
If I.
Which is there is equal to R is double equals means strictly equal to.
If it is strictly equal to the core laws don't let talking about is variable.
Does length mean in the length of the variable which is 1 2 3 4 5 6 7 yet.
If this count I here is strictly equal to is variable quads calls dot the left.
That is the talk and about the length of the content of the aree.
Yeah if it was true down minus 1 then 0.
There you go back to zero and then you start the contact again so it restarts again.
One plus one unsewn and keeps going.
Each time it goes to the end you reset the counter and start again as you click.
That's what that code is saying to let me say this good and we can have a look and see what it looks
like.
Okay so this changed it.
Let's see if it works.
Excellent.
It works for spread gas.
The beginning of the counter.
Okay then blue and so on.
Ah so we have successfully implemented our code to change the colours of the deep.
Notice here the select toys will be applying to the D.
If I had used the body instead of this so looked on it would change the colour of the body off the page.
The entire body might have targeted just this deep element.
So that's it for this project.
Thank you so much for watching.
Please feel free to play around with it and change some of the values and do let me know if you have
any issues.
Thank you and all the best.
Bye for now.